<template>
   <scroll-view :style="[{height: 'calc(100%-' + (44 + statusBarHeight) + 'px)'}]">
      <view v-for="(item, index) in componentList" :key="index">
        <!-- Button -->
        <view v-if="item.componentIdTag === 'view'" :style="item.style">{{ item.attr.content ? item.attr.content.value : '' }}</view>
        <button v-if="item.componentIdTag === 'button'" :type="item.attr.type.value" :style="item.style" @click="sendCmd(item.attr.cmd?item.attr.cmd.value:'')">
          {{ item.attr.content ? item.attr.content.value : '' }}
        </button>
        <!-- Progress -->
        <!-- 首先，componentList存在的时候，item已经有值了 -->
        <progress
          v-else-if="item.componentIdTag === 'progress'"
          :style="item.style"
          :percent="preview ? 50 : deviceDatas[item.attr.dataV].value"
          :show-info="item.attr.showInfoV"
          :stroke-width="item.attr.strokeWidthV"
          :border-radius="item.attr.borderRadiusV"
          :activeColor="item.attr.activeColorV"
          :backgroundColor="item.attr.backgroundColorV"
        />
      </view>
   </scroll-view>
</template>

<script>
import {
  mapState
} from 'vuex'
export default {
  name: 'Render',
  props: {
    componentList: {
      type: Array,
      default: []
    },
    deviceId: {
       type: Number/String,
    },
    preview: {
       type: Boolean,
       default: false
    }
  },
  data() {
     return {
        statusBarHeight: this.$api.config.sysInfo.statusBarHeight,
     }
  },
  computed: {
    ...mapState(['deviceDatas'])
  },
  methods: {
    // 发送一条命令， cmd: 具体命令字符 obj: 附加对象,例如滑动条等,可能需要附加当前进度信息
    sendCmd(cmd, obj = {}) {
      const that = this
      if (that.preview) {
         console.log('模拟发送命令：' + cmd)
      } else {
         if (cmd) {
            that.$api.request('device', 'sendCmd', {
               deviceId: that.deviceId,
               cmd: cmd,
               param: JSON.stringify(obj)
            }).then(res => {

            })
         }
      }
      
    },
  }
}
</script>

<style>

</style>